<template>
  <div>
    <common-head title="用户登录" />
    <div class="box">
      <van-form @submit="onSubmit">
        <van-field
          v-model="user.username"
          name="username"
          label="账号"
          placeholder="用户名/手机/邮箱"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />

        <van-field
          v-model="user.pwd"
          type="password"
          name="pwd"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />

        <div style="margin: 16px">
          <van-button
           round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
      <span class="register" >
         <span @click="$router.push('/register')" class="liji">立即注册<van-icon name="arrow"></van-icon><van-icon name="arrow"></van-icon></span>
        <a href="">忘记密码</a>
      </span>
      <p class="hezuo">使用合作伙伴账号登录 :</p>
      <div class="icon">
        <a
          href="https://m.360kad.com/Login/SinaLogin?ReturnUrl=https%3a%2f%2fm.360kad.com%2fUser"

        >
          <img
            src="https://res.360kad.com/theme/mobile/img/xinlang.png"
            alt=""
         />
        </a>
        <a
          href="https://m.360kad.com/Login/QzoneLogin?ReturnUrl=https%3a%2f%2fm.360kad.com%2fUser"

        >
          <img src="https://res.360kad.com/theme/mobile/img/qq.png" alt="" />
        </a>
      </div>
      <div class="login-agreement">
        <span>登录即代表您已同意
          <a href="https://m.360kad.com/zhuanti/m_yszc.shtml">《康爱多隐私政策》</a>
        </span>
      </div>
    </div>
    <div class="footer">
        <div class="footer_text">
          <van-button type="primary" size="large">400-8808-488</van-button>
          <van-button type="primary" size="large">领取微信下单专属优惠</van-button>
          <p class="p1">下载Android客户端</p>
          <p>copyright ©2010-2021康爱多网上药店 版权所有</p>
        </div>

    </div>
  </div>
</template>

<script>
import CommonHead from '../../components/CommonHead.vue'
import { doLogin } from '_api'
import { Toast } from 'vant'
export default {
  components: { CommonHead },
  name: 'Login',
  data () {
    return {
      user: {
        username: '',
        pwd: ''
      }
    }
  },
  methods: {
    onSubmit (params) {
      doLogin({
        deviceId: '111',
        deviceName: '222',
        ...this.user
      }).then(res => {
        if (res.data.code === 0) {
          Toast({
            type: 'success',
            message: '登录成功',
            duration: 1000,
            onClose: () => {
              localStorage.setItem('token', res.data.data.token)
              if (this.$route.query.from) {
                this.$router.replace(this.$router.query.from)
              } else {
                this.$router.replace('/home')
              }
            }
          })
        } else {
          Toast({
            type: 'fail',
            message: res.data.msg
          })
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.box {
  padding-top: 50px;
  background: white;
  .register {
    display: flex;
    justify-content: space-between;
    width: 100%;
    .liji{
      margin-left: 13px;
      color: #1264ba;
    }
    a {
      color: #1264ba;
      margin-right: 10px;
    }
  }
  .icon {
    display: flex;
    a {
      display: block;
      padding: 8px;
      border: 1px #ebebeb solid;
      float: left;
      border-radius: 50%;
      margin-right: 7px;
      overflow: hidden;
      margin-left:10px;
      }
      img{
        display: inline-block;
width: 45px;
height: 45px;
vertical-align: middle;

      }
    }
    .hezuo{
      line-height: 55px;
      color:#292929;
      margin-left: 13px;
    }
    .login-agreement{
      margin-top: 20px;
      margin-left: 13px;
    line-height: 20px;
    padding-bottom: 10px;
    }
  }
  .footer {
    border-top: 10px solid #e3e3e3;
    .footer_text {
     background: white;
     text-align: center;
      .van-button--primary{
     width: 250px;
height: 30px;
line-height: 30px;
border-radius: 5px;
margin: 0 auto;
    margin-top: 0px;
font-size: 15px;
color: #fff;
background-color: #3cb034;
margin-top: 10px;
      }
      .p1 {
        display: block;
        color: #ff734c;
        font-size: 14px;
        text-align: center;
        padding-top: 5px;
        margin-bottom: 10px;
      }
      p {
        font-size: 12px;
        text-align: center;
        color: #999;
        padding: 0;
      }
    }
  }

</style>
